<template>
  <div class="order-container">
    <h2>我的订单</h2>

    <ul>
      <li v-for="order in orders" :key="order.id" :class="['order-item', order.statusClass]">
        <strong>{{ order.title }}</strong> - 状态: <span>{{ order.status }}</span> {{ order.time }}
      </li>
    </ul>
    <el-button class="back-button" @click="$router.go(-1)">返回</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        { id: 1, title: '车检(2021)', status: '已完成', time: '2021-05-01', statusClass: 'completed' },
        { id: 2, title: '车检(2022)', status: '已完成', time: '2022-05-01', statusClass: 'completed' },
        { id: 3, title: '车检(2023)', status: '已完成', time: '2023-05-01', statusClass: 'completed' },
        { id: 4, title: '车辆维修', status: '待付款', time: '2023-05-01', statusClass: 'pending' },
        { id: 5, title: '车检(2024)', status: '进行中', time: '2024-05-01', statusClass: 'in-progress' },
      ],
    };
  },
};
</script>

<style scoped>
.order-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #42b983;
  font-family: 'Arial', sans-serif;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
}

.order-item {
  padding: 15px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Arial', sans-serif;
  transition: background-color 0.3s;
}

.order-item.completed {
  background-color: #e0f7fa;
}

.order-item.pending {
  background-color: #fff3e0;
}

.order-item.in-progress {
  background-color: #fff9c4;
}

.order-item span {
  font-weight: bold;
}

.back-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.back-button:hover {
  background-color: #36a172;
}
</style>
